<template>
    <div class="main">
        <el-form class="section" :model="formData"  size="medium" ref="form" label-width="150px">
            <el-form-item label="模板类型:" prop="templateType" :rules="commonRules.notNullRule">
                <el-radio v-for="(item, index) in templateData" v-model="formData.templateType" :label="item.val" :key="index">{{item.name}}</el-radio>
            </el-form-item>
            <el-form-item label="排序值:" prop="sort" :rules="commonRules.numberRule">
                <el-input v-model="formData.sort" placeholder="请输入排序值"></el-input>
            </el-form-item>
            <el-form-item label="是否启用:" :rules="commonRules.notNullRule" >
                <el-switch v-model="formData.templateStatus" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" :active-value="'ENABLE'" :inactive-value="'DISABLE'"></el-switch>
            </el-form-item>
            <el-form-item >
                <el-button  type="primary" @click="addAd">添加广告</el-button>
            </el-form-item>
            <el-form-item :rules="commonRules.notNullRule" prop="adList" >
                <el-table  :data="formData.adList"  border fit highlight-current-row>
                    <el-table-column align="center" prop="title" label="广告标题"></el-table-column>
                    <el-table-column align="center"  label="广告图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.imageUrl" class="adimgs" />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="sort" label="排序"></el-table-column>
                    <el-table-column align="center" label="操作" width="120" fixed="right">
                        <template slot-scope="scope">
                            <a href="javascript: void(0);" class="el-icon-remove" @click="delItem(scope.$index)"></a>
                        </template>
                    </el-table-column>
                </el-table>   
            </el-form-item>

            <el-form-item>
                <el-button type="success" :loading="btnLoading" @click="save">保存</el-button>
                <el-button type="info" plain @click="$router.push({name:'b-middleAd'})">取消</el-button>
            </el-form-item>
        </el-form>
    </div>   
</template>
<script>
import {  middleAdEditData, middleAdDetail, middleAdSave } from '@/api/bihuasuan/ad'
import differenceBy from 'lodash/differenceBy';
export default {
    name: 'b-middleAdEdit',
    data() {
        return {
            formData:{
                templateType: 'LEFT_RIGHT',
                sort:'',
                templateStatus:'ENABLE',
                adList: []
            },
            templateData:[
                {
                val:'LEFT_RIGHT',
                name:'左右模板' 
                },
                {
                val:'BIG_BIG_SMALL',
                name:'大小小模板' 
                },
                {
                val:'LEFT_MIDDLE_RIGHT',
                name:'左中右模板' 
                },
                {
                val:'RAIL',
                name:'横栏模板' 
                },
                {
                val:'LEFT_BIG_RIGHT_SMALL',
                name:'左大右小' 
                },
                {
                val:'RIGHT_BIG_LEFT_SMALL',
                name:'右大左小' 
                }
            ],
            btnLoading: false
        }
    },
    created() {
        if(this.$route.query.id) {
            this.getDetail()
        }
    },
    methods:{
        async getAdList() {
            const res = await middleAdEditData({templateId: this.$route.query.id})
            if(res.code===200) {
                this.formData.adList = res.data
            }
        },
        async getDetail() {
            const detail = await  middleAdDetail({id:this.$route.query.id})
            if(detail.code===200) {
                this.formData = {
                    ...detail.data,
                    adList: []
                }
                this.getAdList()
            }
        },
        save() {
           this.$refs.form.validate(valid => {
               if(valid) {
                   if(this.formData.templateType === 'LEFT_RIGHT'||this.formData.templateType === 'LEFT_BIG_RIGHT_SMALL'||this.formData.templateType === 'RIGHT_BIG_LEFT_SMALL') {
                       if(this.formData.adList.length!==2) {
                           this.$message.error('模板内的广告数不对')
                           return false
                       }
                   } else if (this.formData.templateType === 'BIG_BIG_SMALL'||this.formData.templateType === 'LEFT_MIDDLE_RIGHT') {
                       if(this.formData.adList.length!==3) {
                           this.$message.error('模板内的广告数不对')
                           return false
                       }      
                   } else if(this.formData.templateType === 'RAIL') {
                        if(this.formData.adList.length!==1) {
                           this.$message.error('模板内的广告数不对')
                           return false
                        } 
                   }
                   this.btnLoading = true
                    let ids = []
                    this.formData.adList.map(item=>{
                        if(item.id) {
                            ids.push(item.id)
                        }
                    })
                    let savaData={
                        id:this.$route.query.id?this.$route.query.id:'',
                        sort:this.formData.sort,
                        templateStatus: this.formData.templateStatus,
                        templateType: this.formData.templateType,
                        ids: ids
                    }
                    middleAdSave(savaData).then(res=>{
                        if(res.code===200) {
                            this.btnLoading = false
                            this.$router.push({name:'b-middleAd'})
                        }
                    })
               }
           })          
        },
        addAd() {
            let adChooseArr = []
            this.formData.adList.forEach(val=>{
                adChooseArr.push({title:val.title, id:val.id})
            })
            this.bihsAdChoose(adChooseArr, -1, 'BANNER_HOME_CENTER', true, '1').then(val=>{
                let adList = this.formData.adList
                let needDelGoods = differenceBy(adList, val, 'id')
                let needAddGoods = differenceBy(val, adList, 'id')
                for(var i =0;i<adList.length;i++) {
                    for(var j=0;j<needDelGoods.length;j++) {
                        if(adList[i].id === needDelGoods[j].id) {
                            this.formData.adList.splice(i, 1)
                        }
                    }
                }
                this.formData.adList = this.formData.adList.concat(needAddGoods)
                // console.log(this.formData.adList)
            })
        },
        delItem(index){
            this.$confirm(`确定要删除吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.formData.adList.splice(index, 1)
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>
<style scoped>
.adimgs{
    width: 100px;
    height: 50px;
}
</style>